<html>
<head>
	<title>Mute Guest via IFRAME - VDO.Ninja</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
	<style>
	body{
		padding:0;
		margin:0;
		background-color: #0000;
	}
	iframe {
		border:0;
		margin:0;
		padding:0;
		display:block;
		width:100%;
		height:90%
	}
	#viewlink {
		width:400px;
	}
	#container {
		display:block;
		padding:0px;
		padding:0px;
	}
	input{
		padding:5px;
		margin:5px;
	}
	button{
		padding:5px;
		margin:5px;
	}
	</style>
	<script>

	function loadIframe(){ 
		
		document.getElementById("container").innerHTML = "";
		
		
		
		var iframe = document.createElement("iframe");
		var iframeContainer = document.createElement("div");
		iframe.allow = "autoplay;camera;microphone;fullscreen;picture-in-picture;display-capture;";

		iframe.src =  "../?dir=teststeve123&password=1234";
		iframeContainer.appendChild(iframe);
		document.getElementById("container").appendChild(iframeContainer);
		
		var listOfStreamIDs = [
			"1234_pov"
			];
		
		
		for (var i=0;i<listOfStreamIDs.length;i++){
		
			var button = document.createElement("a");
			button.innerHTML = "Invite "+listOfStreamIDs[i];
			button.target = "_blank";
			button.href = "../?room=teststeve123&password=1234&broadcast&transparent&autostart&nmb&nvb&gain=0&webcam&l=stevetest&push="+listOfStreamIDs[i];
			iframeContainer.appendChild(button);
			
			
			
			///////////////////
			
			var button = document.createElement("button");
			button.innerHTML = "speaker true "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "speaker",
					  value: true,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "speaker false "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "speaker",
					  value: false,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			///////////////////
			
			var button = document.createElement("button");
			button.innerHTML = "display true "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "display",
					  value: true,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "display false "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "display",
					  value: false,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			///////////////////
			
			var button = document.createElement("button");
			button.innerHTML = "MUTE true "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "mic",
					  value: true,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "UN-MUTE "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "mic",
					  value: false,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			///////////////////
			
			var button = document.createElement("button");
			button.innerHTML = "addScene 1 toggle "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "addScene",
					  value: 1,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "Scene 1 toggle "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "addScene",
					  value: "toggle",
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			
			var button = document.createElement("button");
			button.innerHTML = "add Scene 1"+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "addScene",
					  value: true,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "remove Scene 1"+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "addScene",
					  value: false,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			///////////////////
			///////////////////
			
			var button = document.createElement("button");
			button.innerHTML = "MUTE SCENE "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "muteScene",
					  value: true,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "un-mute Scene "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "muteScene",
					  value: false,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			///////////////////
			
			var button = document.createElement("button");
			button.innerHTML = "soloChat "+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  
				  iframe.contentWindow.postMessage({
					  action: "soloChat",
					  value: true,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
			
			var button = document.createElement("button");
			button.innerHTML = "soloChat off"+listOfStreamIDs[i];
			button.dataset.sid = listOfStreamIDs[i];
			button.onclick = function(){
				  iframe.contentWindow.postMessage({
					  action: "soloChat",
					  value: false,
					  target: this.dataset.sid
				  }, '*');
			
			}; // target can be a stream ID or * for all.
			iframeContainer.appendChild(button);
		}
		
		////////////  LISTEN FOR EVENTS

		var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
		var eventer = window[eventMethod];
		var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";


		/// If you have a routing system setup, you could have just one global listener for all iframes instead.
		
		eventer(messageEvent, function (e) {
			if (e.source != iframe.contentWindow){return} // reject messages send from other iframes
			if (typeof e.data !== "object"){return;}
			
			if ("action" in e.data){
				var outputWindow = document.createElement("div");
				outputWindow.innerHTML = "event: "+e.data.action+"<br />";
				outputWindow.style.border="1px dotted black";
				iframeContainer.appendChild(outputWindow);
			}
			
			
			if ("streamIDs" in e.data){
				var outputWindow = document.createElement("div");
				outputWindow.innerHTML = "streamID list:<br />";
				for (var key in e.data.streamIDs) {
					outputWindow.innerHTML += "streamID: " +  key + ", label:"+e.data.streamIDs[key] + "\n";          
				}
				outputWindow.style.border="1px dotted black";
				iframeContainer.appendChild(outputWindow);
			}
		});
	}
	</script>
</head>
<body>


<div id="container">

	<button onclick="loadIframe();">Go to Directors Room</button>
	<br />
	The password for guests is 1234<br />
	<br />
	<br />
	Custom guest invites and toggles for add/removing from scene=1 are on the bottom.
</div>
</body>
</html>
